<template>
    <div class="box">
         <Title :place="place" :icon="icon" :title=title @handleTitleClick="handleTitleClick"></Title>
         <div class="imgBox">
             <div class="imgIcon" :style="{height:height}"></div>
         </div>
        
        <p class="text">Success!</p>
        
        <p class="text1">Successfully Opened</p>
    </div>
</template>
<script>
import Title from "../layout/Title"
export default {
    name:"openOK",
  
    components:{
        Title
    },
    beforeRouteLeave(to,from,next){
       //beforeRouterEnter()   https://www.cnblogs.com/lemoncool/p/9242691.html   
         window.zegopay.returnMain();
        next()
     
    },
    data() {
        return {
            place:"left",
            icon:"fanhui",
            height:"",
            title:"ZegoPay"
        }
    },
    methods:{
        handleTitleClick(){
             window.zegopay.returnMain();
           
        }
    },
    mounted(){
         setTimeout(() => {
            this.height="50px"
         }, 20);
    }
}
</script>
<style  scoped>
    .imgIcon{
        width: 50px;
        height: 0px;
        background: url("../assets/img/pay_icon_success.png") no-repeat;
        background-size: cover;
        transition: height  0.5;
        -webkit-transition: height  0.5s;

        position: relative;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        
    }
    .imgBox{
        padding-top: 60px;
        width: 100%;
        height: 50px;
        
    }
    .box p{
        text-align: center;
    }
    .text{
        /* padding-top: 5px; */
        color: #39362B;
        font-size: 20px;
        font-weight: 600;
    }
    .text1{
        padding-top: 10px;
        font-size: 12px;


    }
    
</style>